<template>
	<view class="my-content page" style="width: 100%;overflow-x: hidden;">

		<div class="search-model" v-show="!listIsShow">
			<div class="form-item">
				<div class="form-control" style="width: 100%;">
					<div>
						<div class="label">{{$t('所在国家')}}</div>
					</div>
					<div class="tab">
						<div class="item" style="width:45%" @click="current=0" :class="{active:current==0}">
							<image :src='serverImageUrl("/static/images/index/huangjin.png")' class="flag">
							</image>
							{{$t("在中国")}}
						</div>
						<div class="item" style="width:45%" @click="current=1" :class="{active:current==1}">
							<image :src='serverImageUrl("/static/images/index/huangji.png")' class="flag">
							</image>
							{{$t("在俄罗斯")}}
						</div>
					</div>
				</div>
			</div>

			<div class="form-item">
				<div class="form-control" style="width: 100%;">
					<div>
						<div class="label">{{$t('国籍')}}</div>
					</div>
					<div class="tab">
						<div class="item" style="width:45%" @click="currentnationality=0"
							:class="{active:currentnationality==0}">
							<image :src='serverImageUrl("/static/images/index/huangjin.png")' class="flag">
							</image>
							{{$t("中国")}}
						</div>
						<div class="item" style="width:45%" @click="currentnationality=1"
							:class="{active:currentnationality==1}">
							<image :src='serverImageUrl("/static/images/index/huangji.png")' class="flag">
							</image>
							{{$t("俄罗斯")}}
						</div>
					</div>
				</div>
			</div>




			<div class="form-item">
				<div class="icon">
					<image :src='serverImageUrl("/static/newStyleIcon/address.png")' mode="widthFix" style="width: 100%;"></image>
				</div>
				<div class="form-control" @click="open1(0)">
					<div class="label">
						<div class="text">
							<div class="z9">{{$t('出发地')}}</div>
							<div class="label-line green"></div>
						</div>
					</div>
					<div class="value">
						{{value1||$t('默认')}}
					</div>
				</div>
			</div>
			
			<div class="submit" @click="listIsShow=true">{{$t("下一步")}}</div>

		</div>

		<u-select v-model="cityShow1" :list="cityList" mode="mutil-column-auto" @confirm="kouan"></u-select>

		<div class="search" style="height: auto;">
			<u-search v-model="keyword" :show-action="false" :placeholder="$t('根据关键字进行搜索')" @search="search"></u-search>
		</div>

		<view class="search" v-show="false">
			<u-tabs :current="current" :is-scroll="false" :list="list" active-color="#FF6800" @change="change"></u-tabs>
			<view class="search_guoji">
				<view :class="currentnationality === 0 ? 'search_guojiView border1' : 'search_guojiView'"
					@click="click(0)">
					<image :src='serverImageUrl("/static/images/index/huangjin.png")' style="height: 43.6rpx;width: 64.53rpx;"></image>
					<text class="nationality">{{ $t('中国国籍') }}</text>
				</view>
				<view :class="currentnationality === 1 ? 'search_guojiView border1' : 'search_guojiView'"
					@click="click(1)">
					<image :src='serverImageUrl("/static/images/index/huangji.png")' style="height: 43.6rpx;width: 64.53rpx;"></image>
					<text class="nationality">{{ $t('俄罗斯国籍') }}</text>
				</view>
			</view>
			<u-dropdown ref="uDropdown" active-color="#FF6800" @open="open1">
				<u-dropdown-item v-model="value1" :options="options1" :title="$t('地区')"></u-dropdown-item>
				<!-- <u-dropdown-item v-model="value2" :options="options2" :title="$t('经营范围')"
					@change="change1"></u-dropdown-item> -->
			</u-dropdown>
		</view>
		<view v-show="listIsShow" style="width: 100%;margin: 0 auto;background-color: #f6f6f6;padding:0 30rpx">
			<u-empty style="margin-top: 200rpx;" v-if="!sotreData1||sotreData1.length==0"></u-empty>
			<Item v-for="i in sotreData1" :key="i.id" :type="type" :item="i" @click.native="details(i)"
				@communicates="communicates" @communicate="communicate" @userPage="userPage"></Item>
		</view>

		<vipPopup v-if="vipShow" :show="vipShow" @change="clickVipPopup" />

		<Service />
	</view>
</template>

<script>
	import {
		createC2CConversation,
		isBase64,
		time
	} from "@/common/public";
	import {
		IMAGE_URL
	} from "@/config/app";
	import Service from "@/components/service/service.vue";
	import Item from '@/components/detail/AgencyListItem.vue'
	import vipPopup from "@/components/vipPopup/index.vue";

	export default {
		components: {
			Service,
			Item,
			vipPopup
		},
		data() {
			return {
				listIsShow: true,
				sotreData1: [],
				cityShow1: false,
				keyword: '',
				list: [{
					name: '在中国'
				}, {
					name: '在俄罗斯'
				}],
				current: 0,
				currentnationality: "",
				value1: "",
				value2: "",
				options1: [],
				options2: [], //经营范围
				cityList: [],
				type: 1,
				page: 2,

				vipShow: false,
				//后台开关验证 vip权限
				vip: false,
				params: null
			};
		},
		onLoad({
			type
		}) {
			this.params = uni.getStorageSync("searchParams")
			uni.removeStorageSync("searchParams")



			this.parseParamsFns.agencyList(this);

			this.type = type
			this.GoodsList({
				type
			})
			this.getActionSheetLists()
			this.getSelectCityLists()

			this.$u.api.user.appCheck().then(res => {
				this.report = res.report
				this.vip = res.vip
			})
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("专业代办列表")
			})
		},

		// 上拉加载数据分页
		onReachBottom() {
			this.$u.api.collection.getProfessionalList({
				type: this.type,
				page: this.page,
				release_type: this.transportCurrent
			}).then(res => {
				if (res.length <= 0) {
					// this.$u.toast(this.$t('没有数据了'))
				} else {
					this.sotreData1 = [...this.sotreData1, ...res]
					this.page++
				}
			})
		},

		methods: {
			time,
			clickVipPopup() {
				this.vipShow = false //点击vip弹窗隐藏
			},
			userPage(e) {
				this.$u.route({
					url: 'pages/user/homePage/homePage',
					params: {
						id: e.user_id
					}
				})
			},
			//详情
			details(i) {

				this.$u.route({
					url: "/pages/index/detail/detail",
					params: {
						id: i.id,
						type: this.type,
						releaseType: 'professional'
					}
				})
			},
			change1() {
				this.GoodsList()
			},
			communicates(i) {
				createC2CConversation(i.user.mobile, this)
			},
			communicate(i) {
				if (this.type == 1) {
					//竞标
					createC2CConversation(i.user.mobile, this)
				} else if (this.type == 2) {
					var mobile = uni.getStorageSync('mobile');

					if (mobile === i.user.mobile) {
						this.$u.toast(this.$t('不能参与自己'));
						return false
					}

					var that = this
					that.$u.api.user.order_join_day_auth({
						lang: that.lang
					}).then(res => {
						if (res == 1) {
							that.$u.route({
								url: '/pages/order/process/buildOrder',
								params: {
									type: "professional",
									release_id: i.id,
								}
							})
						} else {
							if (that.vip) {
								that.vipShow = true
								return
							} else {
								uni.showModal({
									content: that.$t('您的权限不足哦!请联系工作人员!'),
									showCancel: false,
									confirmText: that.$t('是'),
								})
								return false;
							}
						}
					})

				}
			},
			getSelectCityLists() {
				this.$u.api.basic.getSelectCityList({
					is_port: true
				}).then(res => {
					this.cityList = res
				})
			},
			change(index) {
				this.current = index;
				this.GoodsList({
					type: this.type,
					searchKey: this.keyword,
					person_in_country: this.current,
					person_from_country: this.currentnationality, //国籍
					person_city: this.value1,
					scope_category_id: this.value2 //id
				})
			},
			open1(value) {
				if (value === 0) {
					this.$refs.uDropdown.close();
					this.cityShow1 = true
				}
			},
			//获取货物列表信息
			GoodsList(data) {
				console.log("--------", data)
				this.sotreData1 = []
				this.$u.api.collection.getProfessionalList(
					this.params || {
						type: this.type,
						searchKey: this.keyword,
						person_in_country: this.current,
						person_from_country: this.currentnationality, //国籍
						person_city: this.value1,
						scope_category_id: this.value2 //id
					}).then(res => {
					this.params = null
					this.sotreData1.push(...res)
				})
			},
			kouan(value) {
				this.value1 = value[2].label
				this.GoodsList()
			},
			search() {
				this.GoodsList()
			},
			click(id) {
				this.currentnationality = id
				this.GoodsList()
			},
			getActionSheetLists() {
				this.$u.api.basic.getActionSheetList({
					type: "release_professional"
				}).then(res => {
					res.forEach(item => {
						this.options2.push({
							label: item.name,
							label_ru: item.name_ru,
							value: item.id
						})
					})
				})
			}
		},
		computed: {
			toImages() {
				return (src) => {
					return isBase64(src) ? src : IMAGE_URL + src
				}
			},
			storeImages() {
				return (sum, images) => {
					if (!Array.isArray(images)) return images
					return images.length > sum ? images.splice(sum) : images
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f6f6f6;
	}

	.bidding_news {
		display: flex;
		justify-content: center;
		margin-bottom: 31.4rpx;

		.bidding_card {
			width: 692rpx;
			background: $my-bgColorFFFFFF;
			box-shadow: 3rpx 7rpx 3rpx 0rpx rgba(234, 234, 234, 0.5);
			border-radius: 14rpx;
			overflow: hidden;

			.bidding_user {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: $my-padding-20;

				//头像大小
				.bidding_user_image {
					padding-left: $my-padding-10;
					height: 50rpx;
					width: 50rpx
				}

				//用户图标
				.bidding_user_icon {
					padding-left: $my-padding-10;
					height: 35rpx;
					width: 35rpx;
				}

				//用户昵称
				.bidding_user_text {
					font-size: 30rpx;
					font-weight: 600;
					color: #0B0B0B;
					padding-left: $my-padding-20;
					line-height: 35rpx;
				}
			}

			//商品的简介
			.biddin_synopsis {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				padding: 0 $my-padding-20 $my-padding-20 $my-padding-20;

				.bidding_synopsis_sel {
					padding: 5.23rpx 0 0 0;
					font-size: $my-font-size21;
					font-weight: 400;
					color: #0B0B0B;
					line-height: 70rpx;

					& text:first-child {}

					& text:last-child {
						font-weight: 600;
					}
				}
			}

			//商品图片展示区
			.bidding_image {
				padding: $my-padding-20 0 0 $my-padding-20;

				image {
					width: 229.07rpx;
					height: 225.58rpx;
					maring-right: 10.98rpx;
					border-radius: 20rpx;
					box-shadow: 0px 0px 8px 0px #ababab;
				}
			}

			//地址信息
			.bidding_address {
				padding: 13.6rpx $my-padding-20 10rpx $my-padding-20;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: $my-font-size21;
				font-weight: 400;
				color: #888888;
				line-height: 30rpx;

				.bidding_ares {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;

					.bidding_ares1 {
						display: flex;
						justify-content: flex-start;

						image {
							width: 24.42rpx;
							height: 31.4rpx;
						}
					}
				}
			}
		}
	}

	/deep/ .u-content {
		background-color: #fff !important;
	}

	/deep/ input {
		background-color: #fff !important;
	}

	.search {
		height: 440.93rpx;
		padding: 30rpx;


		.search_guoji {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 10rpx;

			.search_guojiView {
				width: 316rpx;
				height: 99rpx;
				border-radius: 14rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				background-color: $my-bgColorF6F6F6;
				padding: 20.93rpx;
				font-size: 24rpx;

				font-weight: 500;
				color: rgba(0, 0, 0, 0.88);
				line-height: 35rpx;
				;
			}
		}
	}

	.border1 {
		border: #FF6800 solid 1rpx;
	}

	.bidding_betwn {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.nationality {
		word-break: break-all;
	}

	.page {
		height: 100vh;
	}

	.search-model {
		background-color: #f6f6f6;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		position: absolute;
		top: 0rpx;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
		box-sizing: border-box;

		.tab {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 16rpx;

			.item {
				background-color: #F3F3F3;
				border-radius: 16rpx;
				width: 30%;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx 0;
				font-size: 24rpx;
				text-align: center;
				height: 50rpx;
			}

			.active {
				background-image: linear-gradient(109deg, #D3EF93 1%, rgba(229, 245, 203, 0.24) 61%);
			}
		}

		.form-item {
			background-color: #fff;
			display: flex;
			width: 690rpx;
			padding: 20rpx;
			align-items: center;
			color: #3D3D3D;
			margin-bottom: 20rpx;
			border-radius: 8rpx;
			box-sizing: border-box;

			.icon {
				flex-shrink: 0;
				height: 64rpx;
				width: 64rpx;
				background-color: #F5F4F9;
				border-radius: 8rpx;
				margin-right: 24rpx;
			}

			.label {
				font-size: 26rpx;
				font-weight: 400;
				position: relative;
				display: flex;
			}

			.text {
				position: relative;
				z-index: 9;
			}

			.label-line {
				position: absolute;
				width: 80%;
				height: 10rpx;
				border-radius: 20rpx;
				bottom: 3rpx;
				right: -20rpx;
				z-index: 5;
				background: linear-gradient(90deg, #B4A9E2 -1%, rgba(176, 165, 223, 0.2) 100%);
			}

			.z9 {
				position: relative;
				z-index: 9;
			}

			.green {
				background: linear-gradient(90deg, #98D9D7 -1%, #EAF4F5 100%);
			}

			.blue {
				background: linear-gradient(90deg, #96D7F8 -1%, #E7F7FF 100%);
			}

			.yellow {
				background: linear-gradient(90deg, #FDD872 -1%, #FEF5DD 100%);
			}

			.value {
				font-size: 22rpx;
				color: #3D3D3D;
				margin-top: 12rpx;
			}

			.form-control {
				min-width: 50%;
			}
		}

		.between {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 30rpx;
		}

		.submit {
			width: 602rpx;
			height: 93rpx;
			border-radius: 16rpx;
			background: #000000;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			color: #fff;
			font-size: 30rpx;
			box-sizing: border-box;
			margin-top: 50rpx;
		}
	}

	.flag {
		height: 43rpx;
		width: 64rpx;
		margin-right: 8rpx;
		transform: scale(.8);
	}
</style>